<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LyApi - Admin 在线安装程序</title>
    <link rel="stylesheet" href="{{LayCss}}">
    <script src="{{LayJs}}"></script>

    <!-- 第三方扩展引入 -->
    <link rel="stylesheet" href="{{StepCss}}">
</head>

<body style="background-color: #eeeeee;">

    <ul class="layui-nav layui-bg-blue" lay-filter="">
        <li class="layui-nav-item"><a>LyApi Admin | 在线安装系统</a></li>
    </ul><br />


    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md1">&nbsp;</div>
            <div class="layui-col-md10">

                <!-- 安装程序内容 -->
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                            <div carousel-item>
                                <!-- 使用说明页 -->
                                <div><br />
                                    <fieldset class="layui-elem-field">
                                        <legend>LyApi - Admin 使用说明</legend>
                                        <div class="layui-field-box">
                                            <p>1. 本系统属于开源程序，您可以在本系统的基础上进行功能的增加与修改。如若涉及到二次发布，需要保留原作者信息。</p>
                                            <p>2. 本系统使用 <a href="http://lyapi.wwsg18.com">LyApi</a>
                                                开发框架制作，如若您不熟悉本框架，请勿擅自进行二次开发，以免造成系统问题。</p>
                                            <p>3. 系统自动生成的接口框架同样依赖于 <a href="http://lyapi.wwsg18.com">LyApi</a>
                                                开发框架。如若框架损坏，所有接口将崩溃。</p>
                                            <p>4. 本系统后期可能会推出增值服务，但并不会影响系统基础功能的使用权限！</p>
                                            <p>5. 项目开发者：mr小卓X &nbsp;(参加代码贡献可加入开发者行列)</p>
                                        </div>
                                    </fieldset>
                                    <button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit
                                        lay-filter="formStep">
                                        我已了解，开始安装
                                    </button>
                                </div>

                                <!-- 环境配置页 -->
                                <div><br />
                                    <form class="layui-form" action="">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">数据库地址</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="db_host" required lay-verify="required"
                                                    placeholder="请输入数据库地址" value="127.0.0.1" autocomplete="off"
                                                    class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">数据库端口</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="db_port" required lay-verify="required"
                                                    placeholder="请输入数据库端口号" value="3306" autocomplete="off"
                                                    class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">数据库名</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="db_name" required lay-verify="required"
                                                    placeholder="请输入数据库名称" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">数据库用户</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="db_user" required lay-verify="required"
                                                    placeholder="请输入数据库访问用户名" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">数据库密码</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="db_pass" required lay-verify="required"
                                                    placeholder="请输入数据库访问密码" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">附带模块</label>
                                            <div class="layui-input-block">
                                                <select name="st_down" lay-verify="required">
                                                    <option value="just_self">仅安装 LyApi Admin</option>
                                                    <option value="pliugin_store">LyApi Admin + 插件商城</option>
                                                    <option value="script_tool">LyApi Admin + 脚本工具</option>
                                                </select>
                                            </div>
                                        </div>
                                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="formStep">
                                            开始配置
                                        </button>
                                    </form>
                                </div>

                                <!-- 安装成功页面 -->
                                <div><br />
                                    <div style="text-align: center;margin-top: 90px;">
                                        <i class="layui-icon layui-circle"
                                            style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                        <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                            系统安装成功
                                        </div>
                                        <div style="font-size: 14px;color: #666;margin-top: 20px;">
                                            默认账号: <span id="username"></span> | 默认密码: <span id="password"></span>
                                        </div>
                                    </div>
                                    <div style="text-align: center;margin-top: 50px;">
                                        <button class="layui-btn" onclick="location.href='{{SDomain}}'"> 查看首页 </button>
                                        <button class="layui-btn layui-btn-primary" onclick="location.href='{{SDomain}}/admin'"> 登录后台 </button>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-md1">&nbsp;</div>
        </div>
    </div>

</body>

<script>
    layui.config({
        base: '{{StepJs}}'
    }).use(['form', 'layer', 'step'], function () {

        var $ = layui.$,
            form = layui.form,
            step = layui.step;

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '使用说明'
            }, {
                title: '环境配置'
            }, {
                title: '安装完成'
            }]
        });

        var nowPage = 1;

        form.on('submit(formStep)', function (data) {

            if (nowPage == 1) {

                var loading = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });

                $.get('{{SDomain}}/admin/api/system?service=check', function (res) {
                    if (res.data != [] && res.data != '' && res.data != null) {

                        var errList = '<div>';

                        for(var index in res.data){
                            errList += '<p style="text-align:center;">' + res.data[index][0] + '：' + res.data[index][1] + '</li>';
                        }
                        errList += '</div>';

                        var html = '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' +
                        '<h3 style="text-align:center;">安装问题检测</h3><br/>' + errList + '</div>';

                        layer.open({
                            type: 1
                            ,title: false
                            ,closeBtn: false
                            ,area: '300px;'
                            ,shade: 0.8
                            ,id: 'install_error'
                            ,resize: false
                            ,btn: ['解决方法', '关闭安装']
                            ,btnAlign: 'c'
                            ,moveType: 1 //拖拽模式，0或者1
                            ,content: html
                            ,success: function(layero){
                              var btn = layero.find('.layui-layer-btn');
                              btn.find('.layui-layer-btn0').attr({
                                href: 'http://bbs.wwsg18.com/'
                                ,target: '_blank'
                              });
                            }
                          });
                          layer.close(loading);
                          return false;
                    }else{
                        layer.close(loading);
                        step.next('#stepForm');
                        nowPage++;
                    }
                });
            } else if (nowPage == 2) {
                $.post('{{SDomain}}/admin/api/install', {
                    host: data.field['db_host'],
                    port: data.field['db_port'],
                    name: data.field['db_name'],
                    user: data.field['db_user'],
                    pass: data.field['db_pass'],
                    down: data.field['st_down'],
                }, function (res) {
                    if (res.data != '') {

                        $('#username').html(res.data.username);
                        $('#password').html(res.data.password);

                        step.next('#stepForm');
                        nowPage++;

                    } else if (res.msg == '测试连接失败') {
                        layer.msg('数据库测试连接失败...');
                    } else if (res.msg == '安装出现错误') {
                        layer.msg('安装系统出现意外错误...')
                    } else if (res.msg == '程序已安装') {
                        layer.msg('请勿重复安装本系统...');
                    }
                });
            }
            return false;
        });

    });
</script>

</html>